<!DOCTYPE html>
<html>
<head>
    <base id="base" href="${basePath!}/">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <link href="${basePath!}/static/layui/css/layui.css" type="text/css" media="screen" rel="stylesheet"/>
    <script src="${basePath!}/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="${basePath!}/static/layui/layui.js" type="text/javascript"></script>
    <script src="${basePath!}/static/js/ztree/jquery.ztree.all.js" type="text/javascript"></script>
</head>
<body>
<#--↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓add↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓-->
<#--带有 class="layui-fluid" 的容器中，那么宽度将不会固定，而是 100% 适应-->
<div id="adddivid" hidden="" class="layui-fluid" style="margin: 15px;">
    <form class="layui-form" action="" id="addformid">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">权限编码</label>
                <div class="layui-input-block">
                    <input type="text" id="code" name="code" lay-verify="code" autocomplete="off" placeholder="请输入四位权限编码" class="layui-input" required/>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">父级编码</label>
                <div class="layui-input-block">
                    <input type="text" id="parentCode" name="parentCode" autocomplete="off" class="layui-input" disabled value="1" />
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-block">
                    <input type="text" id="name" name="name" lay-verify="name" autocomplete="off" class="layui-input" required/>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">序号</label>
                <div class="layui-input-block">
                    <input type="number" id="orderBy" name="orderBy" lay-verify="orderBy" autocomplete="off" class="layui-input" required/>
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">级别</label>
                <div class="layui-input-block">
                    <select id="state" name="state" lay-filter="type" lay-verify="required" disabled>
                        <option value="1">一级菜单</option>
                        <option value="2">二级菜单</option>
                        <option value="3">三级按钮</option>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <select id="type" name="type" lay-filter="type" lay-verify="required" disabled>
                        <option value="0">菜单</option>
                        <option value="1">按钮</option>
                    </select>
                </div>
            </div>
        </div>



        <div class="layui-form-item">
            <label class="layui-form-label">请求路径</label>
            <div class="layui-input-block">
                <input type="text" id="url" name="url" lay-verify="required" autocomplete="off" placeholder="请输入权限路径" class="layui-input"/>
            </div>
        </div>

        <div class="layui-from-item">
            <label class="layui-form-label">权限标识</label>
            <div class="layui-input-block">
                <input type="text" id="flag" name="flag" lay-verify="required" autocomplete="off" placeholder="请输入调用权限标识" class="layui-input"/>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addsubmit">立即提交</button>
                <button id="reset" type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>
</div>
<#--↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑add↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑-->



<div class="layui-btn-group">
    <button class="layui-btn" id="add">增加</button>
</div>
<table id="treegrid" lay-filter="operations"></table>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script type="text/javascript">
    var layerid;
    layui.use(['layer', 'form', 'treeGrid'], function () {
        var $ = layui.jquery,
                layer = layui.layer,
                treeGrid = layui.treeGrid,
                form = layui.form;

        treeGrid.render({
            elem: '#treegrid',
            url: 'admin/permission/list?parentCode=1',
            cellMinWidth: 100,
            treeId: 'code', //树形id字段名称
            treeUpId: 'parentCode', //树形父id字段名称
            treeShowName: 'name', //以树形式显示的字段
            cols: [[
                // {type: 'checkbox'},
                {title: '序号', width:80, align: 'center',
                    templet: function(obj){
                        return obj.LAY_TABLE_INDEX + 1;
                    }
                },
                {field: 'name', edit: 'text', width: '130', title: '名称'},
                {field: 'code', width: '130', title: '权限编码'},
                {field: 'parentCode', width: '130', title: '父级权限'},
                {field: 'flag', edit: 'text', width: '150', title: '权限标识'},
                {field: 'url', edit: 'text', width: '250', title: '请求路径'},
                {field: 'type', width: '100', title: '类型', align: 'center',
                    templet : function(data){
                        return data.type == 0 ? '菜单' : '按钮';
                    }
                },
                {field: 'state', width: '100', title: '级别', align: 'center'},
                {field: 'orderBy', edit: 'text', width: '100', title: '序号', align: 'center'},
                {fixed: 'right', width:200, align:'center', toolbar: '#permissionOperations'}
            ]],
            response: {
                statusName: 'code', //数据状态的字段名称，默认：code
                statusCode: 200, //成功的状态码，默认：0
                msgName: 'msg', //状态信息的字段名称，默认：msg
                countName: 'count', //数据总数的字段名称，默认：count
                dataName: 'data', //数据列表的字段名称，默认：data
            }
        });

        //监听工具条
        treeGrid.on('tool(operations)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            if(layEvent === 'addsub'){ //添加下级
                $("#reset").click();// 重置表单

                //默认填充表单
                state = data.state + 1;
                document.getElementById('parentCode').value = data.code;
                document.getElementById('state').value = state;
                document.getElementById('type').value = state == 3 ? 1 : 0;// 0为菜单功能，1为按钮操作
                document.getElementById('orderBy').value = 1;

                layerid = layer.open({//开启表单弹层
                    skin: 'layui-layer-molv',
                    area:'60%',
                    type: 1,
                    title:'新增权限',
                    shadeClose:true,
                    content: $('#adddivid') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
            } else if (layEvent === 'edit'){ //编辑，根据权限编码code计算出父级权限 和 权限级别
                layerid = layer.open({
                    skin: 'layui-layer-molv',
                    content: '请确定是否真的要保存编辑昵称为' + data.name + '的记录?',
                    btn: ['确定', '取消'],//定义两个按钮，是和否
                    yes: function(index, layero){//点击是时候的回调
                        layer.close(index); //如果设定了yes回调，需进行手工关闭
                        $.ajax({
                            type: "POST",
                            url:"admin/permission/update",
                            data:data,
                            async: false,
                            error: function(request) {
                                layer.alert("与服务器连接失败/(ㄒoㄒ)/~~");
                            },
                            success: function(data) {
                                if(data.code==500){
                                    layer.alert(data.msg);
                                }
                                if(data.code==200){
                                    //打开成功消息提示
                                    layer.open({
                                        skin: 'layui-layer-molv',
                                        content: '编辑成功！',
                                        btn:['确定'],
                                        shadeClose:true,
                                        end: function(){
                                            layer.close(layerid);//消息提示结束后回调，关闭上一级新建表单所在弹层
                                            $(".layui-laypage-btn").click();
                                        }
                                    });

                                }
                            }
                        });
                    }
                });

            } else if(layEvent === 'del'){ //删除
                layer.open({
                    skin: 'layui-layer-molv',
                    content: '请确定是否真的要删除编码为'+data.code+'的记录?',
                    btn: ['确定', '取消'],//定义两个按钮，是和否
                    yes: function(index, layero){//点击是时候的回调
                        layer.close(index); //如果设定了yes回调，需进行手工关闭
                        $.ajax({
                            type: "POST",
                            url:"admin/permission/delete",
                            data:{code:data.code},
                            async: false,
                            error: function(request) {
                                layer.alert("与服务器连接失败/(ㄒoㄒ)/~~");
                            },
                            success: function(data) {
                                if(data.code==500){
                                    layer.alert(data.msg);
                                }
                                if(data.code==200){
                                    //打开成功消息提示
                                    layer.open({
                                        skin: 'layui-layer-molv',
                                        content: data.msg,
                                        btn:['确定'],
                                        shadeClose:true,
                                        end: function(){
                                            layer.close(layerid);//消息提示结束后回调，关闭上一级新建表单所在弹层
                                            $(".layui-laypage-btn").click();
                                        }
                                    });

                                }
                            }
                        });
                    }
                });
            }
        });

        //添加按钮点击事件
        $("#add").click(function () {
            $("#reset").click();//重置表单(新建时在进入表单前要重置一下表单的内容，不然表单打开后会显示上一次的表单的内容。这里调用表单中重置按钮的点击方法来重置)
            layerid = layer.open({//开启表单弹层
                skin: 'layui-layer-molv',
                area:'60%',
                type: 1,
                title:'新增权限',
                shadeClose:true,
                content: $('#adddivid') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            });
        });

        //监听提交
        form.on('submit(addsubmit)', function(obj) {
            var  fromdata = obj.field;

            // 提交之前拼接code
            if (fromdata.parentCode != 1){
                fromdata.code = fromdata.parentCode + fromdata.code;
            }

            $.ajax({
                type: "POST",
                url:"admin/permission/save",
                data: fromdata,
                async: false,
                error: function(request) {
                    layer.alert("与服务器连接失败/(ㄒoㄒ)/~~");
                },
                success: function(data) {
                    if(data.code == 500){
                        layer.alert(data.msg);
                    }
                    if(data.code == 200){
                        layer.open({
                            skin: 'layui-layer-molv',
                            content: '操作成功！',
                            btn:['确定'],
                            shadeClose:true,
                            end: function(){
                                //消息提示结束后回调，关闭上一级 新建or编辑 表单所在弹层
                                layer.closeAll();
                                $(".layui-laypage-btn").click();
                            }
                        });

                    }
                }
            });
            return false;
        });


        // 表单验证
        form.verify({
            // value表单的值，item 表单的dom对象
            code: function(value, item){
                if (!/^[0-9]{4,4}$/.test(value) ){// 正则匹配数字，并且只能是四位数
                    return 'code值必须为四位数字的编码'
                }
            },
            // name: function(value,item){
            //     if (!/^[a-zA-Z0-9_\u9fa5\\s·]+$/.test(value)){
            //         return '权限名称不能包含特殊字符';
            //     }
            // },
            orderBy: function(value,item){
                if (!/^[0-9]*[0-9][0-9]*$/.test(value)){
                    return '序号必须是正整数';
                }
            }

        });

    });
</script>

<script type="text/html" id="permissionOperations">
    <a class="layui-btn layui-btn-xs" lay-event="addsub" id="addsub">新增</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit" id="edit">保存</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" id="del">删除</a>
</script>

</body>
</html>